<template>
  <div class='account-security'>
    <van-nav-bar title="账号与安全" left-arrow @click-left="$router.back()" />
          <van-cell title="手机号码" is-link value="1868****8151" />
          <van-cell title="修改密码" is-link />
          <a class="describe">社交平台账号绑定</a>
          <van-cell title="微信" >
            <template #right-icon>
              <van-switch v-model="checked" size="20px"/>
            </template>
          </van-cell>
          <van-cell title="QQ" >
            <template #right-icon>
              <van-switch v-model="checked" size="20px"/>
            </template>
          </van-cell>
          <van-cell title="微博" >
            <template #right-icon>
              <van-switch v-model="checked" size="20px"/>
            </template>
          </van-cell>
          <a class="describe">高级设置</a>
          <van-cell title="账号注销" is-link />
          <van-cell title="登录设备管理" is-link />
          <van-cell title="头条安全中心" label="账号锁定或解除" is-link/>
   </div>
</template>

<script>
export default {
  name: 'account-security',
  components: {},
  data () {
    return {
      checked: false
    }
  },
  created () {},
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    }
  }
}
</script>
<style lang="scss" scoped>
.account-security {
  text-align: left;
}
.van-cell__value{
  // 文字一行显示 显示省略号
  white-space:nowrap;
  text-overflow:ellipsis;
}

.describe{
  display:block;
  margin: 0px 15px;
  padding: 10px 0px;
  font-size: 14px;
  color: #ccc;
  border-bottom: 1px solid rgb(243, 243, 243);
}
</style>
